Užtikrinkite įtraukią žiniatinklio patirtį vartotojams visame pasaulyje, įdiegdami prieinamas formų etiketes. Išmokite geriausių WCAG atitikties ir geresnio naudojimo praktikų.
Formų etiketės: esminiai įvesties laukų prieinamumo reikalavimai
Formos yra pagrindinė interneto dalis. Nuo paprastų kontaktų formų iki sudėtingų el. prekybos atsiskaitymo procesų, jos leidžia vartotojams sąveikauti su svetainėmis ir programomis. Tačiau prastai sukurtos formos gali sukelti didelių kliūčių vartotojams su negalia. Svarbus elementas kuriant prieinamas formas yra teisingas formų etikečių naudojimas. Šiame vadove pateikiama išsami formų etikečių prieinamumo reikalavimų apžvalga, užtikrinanti, kad jūsų formomis galėtų naudotis visi, nepriklausomai nuo jų gebėjimų.
Kodėl prieinamos formų etiketės yra svarbios?
Prieinamos formų etiketės yra gyvybiškai svarbios dėl kelių priežasčių:
- Patogumas naudoti: Aiškios ir glaustos etiketės padeda visiems vartotojams suprasti kiekvieno įvesties lauko paskirtį, taip pagerindamos bendrą patogumą naudoti.
- Prieinamumas: Etiketės suteikia esminę informaciją vartotojams su negalia, ypač tiems, kurie naudojasi pagalbinėmis technologijomis, pavyzdžiui, ekrano skaitytuvais. Be tinkamų etikečių šie vartotojai gali nesugebėti užpildyti formų.
- WCAG atitiktis: Žiniatinklio turinio prieinamumo gairėse (WCAG) reikalaujama, kad visi formos valdikliai turėtų susijusias etiketes. Šių gairių laikymasis užtikrina, kad jūsų svetainė yra prieinama ir teisiškai atitinkanti reikalavimus daugelyje jurisdikcijų.
- SEO: Nors tai nėra tiesioginis reitingavimo veiksnys, prieinamos svetainės paprastai pasižymi geresne vartotojo patirtimi, o tai gali netiesiogiai pagerinti SEO rezultatus.
WCAG reikalavimų formų etiketėms supratimas
WCAG pateikia konkrečias gaires, kaip užtikrinti formų prieinamumą. Štai pagrindiniai reikalavimai, susiję su formų etiketėmis:
WCAG 2.1 sėkmės kriterijus 1.1.1 Netekstinis turinys (A lygis)
Nors tai nėra tiesiogiai susiję su etiketėmis, šis kriterijus pabrėžia, kaip svarbu pateikti tekstines alternatyvas visam netekstiniam turiniui, įskaitant CAPTCHA ir formose naudojamus vaizdus. Tinkamai paženklinta forma yra labai svarbi norint suteikti šioms alternatyvoms kontekstą.
WCAG 2.1 sėkmės kriterijus 1.3.1 Informacija ir ryšiai (A lygis)
Informacija, struktūra ir ryšiai, perteikiami per pateikimą, turėtų būti programiškai nustatomi arba prieinami tekstu. Tai reiškia, kad ryšys tarp etiketės ir atitinkamo įvesties lauko turi būti aiškiai apibrėžtas HTML kode.
WCAG 2.1 sėkmės kriterijus 2.4.6 Antraštės ir etiketės (AA lygis)
Antraštės ir etiketės apibūdina temą ar tikslą. Formų etiketės suteikia aprašomąjį kontekstą įvesties laukams, todėl vartotojams lengviau suprasti formos struktūrą ir tiksliai ją užpildyti.
WCAG 2.1 sėkmės kriterijus 3.3.2 Etiketės arba instrukcijos (A lygis)
Etiketės arba instrukcijos pateikiamos, kai turiniui reikalinga vartotojo įvestis.
WCAG 2.1 sėkmės kriterijus 4.1.2 Pavadinimas, vaidmuo, vertė (A lygis)
Visų vartotojo sąsajos komponentų (įskaitant, bet neapsiribojant, formos elementus, nuorodas ir scenarijų sugeneruotus komponentus) pavadinimą ir vaidmenį galima nustatyti programiškai; būsenas, savybes ir vertes, kurias gali nustatyti vartotojas, galima nustatyti programiškai; o pranešimai apie šių elementų pakeitimus yra prieinami vartotojo agentams, įskaitant pagalbines technologijas.
Geriausios prieinamų formų etikečių įgyvendinimo praktikos
Čia pateikiamos kelios geriausios praktikos, kaip sukurti prieinamas formų etiketes:
1. Naudokite <label> elementą
<label> elementas yra pagrindinis būdas susieti tekstinę etiketę su įvesties lauku. Jis suteikia semantinį ir struktūrinį ryšį tarp etiketės ir valdiklio. <label> elemento for atributas turi atitikti atitinkamo įvesties lauko id atributą.
Pavyzdys:
<label for="name">Vardas:</label>
<input type="text" id="name" name="name">
Neteisingas pavyzdys (venkite):
<span>Vardas:</span>
<input type="text" id="name" name="name">
Naudojant span elementą vietoje label, nesukuriama būtina programinė asociacija, todėl ji tampa neprieinama ekrano skaitytuvams.
2. Aiškiai susiekite etiketes su įvesties laukais
Užtikrinkite aiškų ir nedviprasmišką ryšį tarp etiketės ir įvesties lauko, naudodami for ir id atributus, kaip parodyta aukščiau pateiktame pavyzdyje.
3. Teisingai išdėstykite etiketes
Etikečių išdėstymas gali turėti įtakos patogumui naudoti. Paprastai etiketės turėtų būti dedamos:
- Virš įvesties lauko: Tai dažnai yra prieinamiausias ir patogiausias vartotojui variantas, ypač teksto laukams ir teksto sritims.
- Į kairę nuo įvesties lauko: Įprasta, bet gali būti mažiau efektyvu vartotojams su regos sutrikimais, kuriems gali būti sunku nuskaityti puslapį.
- Radijo mygtukams ir žymimiesiems laukeliams: Etiketės turėtų būti dedamos į dešinę nuo valdiklio.
Išdėstydami etiketes, atsižvelkite į kultūrines normas. Kai kuriose kalbose etiketės tradiciškai dedamos po įvesties lauko. Pritaikykite savo dizainą, kad atitiktų šiuos pageidavimus.
4. Pateikite aiškias ir glaustas etiketes
Etiketės turėtų būti trumpos, aprašomosios ir lengvai suprantamos. Venkite žargono ar techninių terminų, kurie gali suklaidinti vartotojus. Pavyzdžiui, vietoj „UserID“ naudokite „Vartotojo vardas“ arba „El. pašto adresas“. Apsvarstykite lokalizaciją. Užtikrinkite, kad jūsų etiketės būtų lengvai verčiamos į skirtingas kalbas, išlaikant jų prasmę.
5. Kai būtina, naudokite ARIA atributus
ARIA (Accessible Rich Internet Applications) atributai gali pagerinti formos elementų prieinamumą, ypač sudėtingose situacijose. Tačiau ARIA naudokite apgalvotai ir tik tada, kai nepakanka natūralių HTML elementų ir atributų.
- aria-label: Naudokite šį atributą, kad pateiktumėte etiketę, kai matoma etiketė nėra įmanoma ar praktiška.
- aria-labelledby: Naudokite šį atributą, norėdami nurodyti esamo puslapio elemento ID, kuris tarnaus kaip etiketė.
- aria-describedby: Naudokite šį atributą, kad pateiktumėte papildomos informacijos ar instrukcijų įvesties laukui. Tai naudinga norint suteikti kontekstą arba paaiškinti tikrinimo taisykles.
Pavyzdys naudojant aria-label:
<input type="search" aria-label="Ieškoti svetainėje">
Pavyzdys naudojant aria-labelledby:
<h2 id="newsletter-title">Naujienlaiškio prenumerata</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Įveskite savo el. pašto adresą">
6. Grupuokite susijusius formos elementus su <fieldset> ir <legend>
<fieldset> elementas grupuoja susijusius formos valdiklius, o <legend> elementas pateikia laukų rinkinio antraštę. Tai pagerina formos struktūrą ir leidžia vartotojams lengviau suprasti ryšius tarp skirtingų įvesties laukų.
Pavyzdys:
<fieldset>
<legend>Kontaktinė informacija</legend>
<label for="name">Vardas:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">El. paštas:</label>
<input type="email" id="email" name="email">
</fieldset>
7. Pateikite aiškius klaidų pranešimus
Kai vartotojai pildydami formą padaro klaidų, pateikite aiškius ir informatyvius klaidų pranešimus, kurie paaiškina, kas nutiko ne taip ir kaip klaidą ištaisyti. Susiekite šiuos klaidų pranešimus su atitinkamais įvesties laukais naudodami ARIA atributus, pvz., aria-describedby.
Pavyzdys:
<label for="email">El. paštas:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Įveskite galiojantį el. pašto adresą.</span>
Užtikrinkite, kad klaidos pranešimas būtų vizualiai išskirtinis (pvz., naudojant spalvą ar piktogramas) ir programiškai prieinamas pagalbinėms technologijoms.
8. Naudokite pakankamą spalvų kontrastą
Užtikrinkite pakankamą spalvų kontrastą tarp etiketės teksto ir fono spalvos, kad atitiktumėte WCAG reikalavimus. Naudokite spalvų kontrasto analizatoriaus įrankį, kad patikrintumėte, ar kontrasto santykis atitinka minimalius reikalavimus (4,5:1 normaliam tekstui ir 3:1 dideliam tekstui). Tai padeda vartotojams su silpnu regėjimu lengviau skaityti etiketes.
9. Užtikrinkite prieinamumą klaviatūra
Visi formos elementai turi būti pasiekiami naudojant tik klaviatūrą. Vartotojai turėtų galėti naršyti po formą naudodami Tab klavišą ir sąveikauti su formos valdikliais naudodami tarpo arba Enter klavišą. Kruopščiai išbandykite savo formas su klaviatūra, kad užtikrintumėte tinkamą prieinamumą klaviatūra.
10. Išbandykite su pagalbinėmis technologijomis
Geriausias būdas užtikrinti, kad jūsų formos yra prieinamos, yra išbandyti jas su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai (pvz., NVDA, JAWS, VoiceOver). Tai padės jums nustatyti prieinamumo problemas, kurios gali būti nepastebimos vizualiai tikrinant. Įtraukite vartotojus su negalia į savo testavimo procesą, kad gautumėte vertingų atsiliepimų.
Prieinamų formų etikečių įgyvendinimo pavyzdžiai
1. Pavyzdys: Paprasta kontaktų forma (tarptautinė perspektyva)
Apsvarstykite kontaktų formą, skirtą pasaulinei auditorijai. Etiketės turėtų būti aiškios, glaustos ir lengvai verčiamos.
<form>
<label for="name">Pilnas vardas:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">El. pašto adresas:</label>
<input type="email" id="email" name="email"><br><br>
<label for="country">Šalis:</label>
<select id="country" name="country">
<option value="">Pasirinkite šalį</option>
<option value="us">Jungtinės Valstijos</option>
<option value="ca">Kanada</option>
<option value="uk">Jungtinė Karalystė</option>
<option value="de">Vokietija</option>
<option value="fr">Prancūzija</option>
<option value="jp">Japonija</option>
<option value="au">Australija</option>
<!-- Pridėti daugiau šalių -->
</select><br><br>
<label for="message">Žinutė:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Pateikti">
</form>
Atkreipkite dėmesį, kad aiškumo dėlei naudojamas „Pilnas vardas“ vietoj tiesiog „Vardas“, ypač kultūrose, kur pavardės rašomos prieš vardus.
2. Pavyzdys: El. prekybos atsiskaitymo forma
El. prekybos atsiskaitymo formose dažnai reikalaujama jautrios informacijos. Aiškios etiketės ir instrukcijos yra labai svarbios norint sukurti pasitikėjimą ir užtikrinti prieinamumą.
<form>
<fieldset>
<legend>Pristatymo adresas</legend>
<label for="shipping_name">Pilnas vardas:</label>
<input type="text" id="shipping_name" name="shipping_name"><br><br>
<label for="shipping_address">Adresas:</label>
<input type="text" id="shipping_address" name="shipping_address"><br><br>
<label for="shipping_city">Miestas:</label>
<input type="text" id="shipping_city" name="shipping_city"><br><br>
<label for="shipping_zip">Pašto / Zip kodas:</label>
<input type="text" id="shipping_zip" name="shipping_zip"><br><br>
<label for="shipping_country">Šalis:</label>
<select id="shipping_country" name="shipping_country">
<option value="">Pasirinkite šalį</option>
<option value="us">Jungtinės Valstijos</option>
<option value="ca">Kanada</option>
<!-- Pridėti daugiau šalių -->
</select>
</fieldset>
<fieldset>
<legend>Mokėjimo informacija</legend>
<label for="card_number">Kredito kortelės numeris:</label>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">Galiojimo data (MM/YY):</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
</fieldset>
<input type="submit" value="Pateikti užsakymą">
</form>
Laukų rinkinių ir legendų naudojimas aiškiai suskirsto formą į logines dalis. Vietos rezervavimo tekstas (placeholder) suteikia papildomų nurodymų, tačiau atminkite, kad jis neturėtų būti naudojamas kaip etikečių pakaitalas.
3. Pavyzdys: Registracijos forma su ARIA atributais
Apsvarstykite registracijos formą, kurioje slapyvardis yra neprivalomas. Naudodami ARIA atributus, galime suteikti papildomo konteksto.
<form>
<label for="username">Vartotojo vardas:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Slaptažodis:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="nickname">Slapyvardis (neprivaloma):</label>
<input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
<span id="nickname-info">Šis slapyvardis bus rodomas viešai.</span><br><br>
<input type="submit" value="Registruotis">
</form>
aria-describedby atributas susieja slapyvardžio įvesties lauką su span elementu, kuris pateikia papildomos informacijos apie tai, kaip slapyvardis bus naudojamas.
Formų prieinamumo testavimo įrankiai
Keli įrankiai gali padėti įvertinti jūsų formų prieinamumą:
- Accessibility Insights: Naršyklės plėtinys, nustatantis prieinamumo problemas tinklalapiuose.
- WAVE (Web Accessibility Evaluation Tool): Internetinis įrankis, vertinantis tinklalapių prieinamumo klaidas.
- axe DevTools: Naršyklės plėtinys, atliekantis automatizuotą prieinamumo testavimą.
- Ekrano skaitytuvai (NVDA, JAWS, VoiceOver): Testavimas su ekrano skaitytuvais yra būtinas norint nustatyti prieinamumo problemas, kurios gali būti nepastebimos atliekant automatizuotą testavimą.
Išvada
Prieinamos formų etiketės yra būtinos norint sukurti įtraukią žiniatinklio patirtį. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite užtikrinti, kad jūsų formomis galės naudotis visi, nepriklausomai nuo jų gebėjimų. Prieinamumo prioritetas ne tik naudingas vartotojams su negalia, bet ir pagerina bendrą jūsų svetainės patogumą naudoti visiems vartotojams. Nepamirškite nuolat testuoti savo formas su pagalbinėmis technologijomis ir įtraukti vartotojus su negalia į savo testavimo procesą, kad gautumėte vertingų atsiliepimų ir nuolat tobulintumėte savo svetainės prieinamumą.
Prieinamumo priėmimas yra ne tik atitikties klausimas; tai yra apie įtraukesnio ir teisingesnio interneto kūrimą visiems. Investuodami į prieinamą formų dizainą, jūs demonstruojate įsipareigojimą įtraukumui ir sukuriate geresnę vartotojo patirtį visiems.